<template>
    <div class="container" ref="containerRef">
        <router-view></router-view>
        <div class="qilin-QilinUtils-operate">
            <el-button icon="Upload" type="primary" size="default" circle @click="scrollPage('top')"></el-button>
            <el-button icon="Top" type="primary" size="default" circle @click="scrollPage1('top')"></el-button>
            <el-button icon="Download" type="primary" size="default" circle @click="scrollPage('bottom')"></el-button>
            <el-button icon="Bottom" type="primary" size="default" circle @click="scrollPage1('bottom')"></el-button>
        </div>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";

/*
    数据变量定义区域
*/
// 获取容器组件元素DOM
const containerRef=ref(null);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 点击按钮事件监听
const scrollPage=(state)=>{
    // console.log(containerRef.value);
    const Distance=Qilin.Element.getNodeHeight(containerRef.value.parentNode)-Qilin.Element.getNodeContentHeight(containerRef.value.parentNode);
    Qilin.Element.setNodeScrollTop(containerRef.value.parentNode,state == "top" ? 0 : Distance,1000).then(()=>{
        if(state === "top"){
            console.log("已置顶");
        }else{
            console.log("已至底");
        };
    });
};
const scrollPage1=(state)=>{
    // console.log(containerRef.value);
    const Distance=Qilin.Element.getNodeScrollTop(containerRef.value.parentNode);
    Qilin.Element.setNodeScrollTop(containerRef.value.parentNode,state == "top" ? (Distance-800) : (Distance+800),500).then(()=>{
        if(state === "top"){
            console.log("向上滚动500px");
        }else{
            console.log("向下滚动500px");
        };
    });
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    padding: 0 10px 40px;
    >.qilin-QilinUtils-operate{
        position: fixed;
        bottom: 5%;
        right: 5%;
        z-index:10;
    }
}
</style>
